<template>
  <div class="form-box">
    <div class="card bg-light mb-3" style="max-width: 27rem;margin-top:10rem">
      <div class="card-header">
        <ul class="nav nav-pills justify-content-center">
          <li class="nav-item">
              <router-link class="nav-link" to="/login">登陆</router-link>
          </li>
          <li class="nav-item">
            <a class="nav-link active">注册</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <form @submit.prevent="submitForm()">
          <div class="input-group mb-3 mr-sm-2">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <i class="fa fa-user-circle"></i>
              </div>
            </div>
            <input
              type="text"
              class="form-control"
              placeholder="请输入用户名，不少于4个字符！"
              ref="username"
              required
              v-model="username"
              minlength="4"
              v-on:input="formValidate('username')"
            >
          </div>
          <div class="input-group mb-3 mr-sm-2">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <i class="fa fa-lock"></i>
              </div>
            </div>
            <input
              type="password"
              class="form-control"
              placeholder="请输入您的密码，不少于6个字符！"
              ref="password"
              required
              v-model="password"
              minlength="6"
              v-on:input="formValidate('password')"
            >
          </div>

          <div class="input-group mb-3 mr-sm-2">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <i class="fa fa-lock"></i>
              </div>
            </div>
            <input
              type="password"
              class="form-control"
              placeholder="请再次输入密码，不少于6个字符！"
              ref="rePassword"
              required
              v-model="rePassword"
              minlength="6"
              v-on:input="formValidate('rePassword')"
            >
          </div>

          <div class="form-check mb-3">
            <input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="remember">
            <label class="form-check-label" for="exampleCheck1">Remember me</label>
          </div>

          <button type="submit" class="btn btn-info btn-block" :disabled="isRegister">确认注册</button>
        </form>
      </div>
    </div>
    <div class="cover"></div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      rePassword:"",
      remember:true,
      isRegister:false
    }
  },
  created(){

  },
  methods: {
    submitForm(){
      let userList=this.$store.getters.getUser;
      for(let value of userList){
        if(value.username==this.username){
          alert("用户已存在，请重新输入！");
          return;
        }
      }
      let newUser={
        id:userList.length+1,
        role:"user",
        username:this.username,
        password:this.password,
        accountMoney:0,
        realName:null,
			  tel:null,
        streetName:null,
        province:null,
        city:null,
        county:null,
        userOrder:[],
        userStatus:"active"        
      };
      if(localStorage.getItem('newUser') != null){
          let LocalUserData =JSON.parse(localStorage.getItem('newUser'));
          LocalUserData.push(newUser);
          localStorage.setItem('newUser',JSON.stringify(LocalUserData));              
      }else{
        localStorage.setItem('newUser',JSON.stringify([...[newUser]]));
      }  
      this.$store.commit("addUser",newUser);
      this.$store.commit("changeLoginStatus",newUser.id);
      this.setCookie(newUser.id,newUser.username,1);
      alert("注册成功，准备进入首页");
      this.$router.push("/");
      

    },
    formValidate(type) {
      if (type == "username"){
        if (this.username != "") {
          this.$refs.username.setCustomValidity("");
        } else {
          this.$refs.username.setCustomValidity("用户名不能为空！");
        }
      }
      if(type == "password"){
        if (this.password != "") {
          this.$refs.password.setCustomValidity("");
        }else{
          this.$refs.password.setCustomValidity("密码不能为空！");
        }
      }
      if(type == "rePassword"){
        if (this.password != "") {
          if(this.password!=this.rePassword){
            this.$refs.rePassword.setCustomValidity("两次密码不相同，请重新输入！");
          }else{
            this.$refs.rePassword.setCustomValidity("");
          } 
        }else{
          this.$refs.rePassword.setCustomValidity("密码不能为空！");
        }
      }      
    },
    setCookie(userId,userNmae,expires){
      let Days = expires;
      let exp = new Date();
      exp.setTime(exp.getTime() + Days*24*60*60*1000);
      document.cookie=`id=${userId};expires=${exp.toGMTString()}`;
      document.cookie=`username=${encodeURI(userNmae)};expires=${exp.toGMTString()}`;
    },
  }
};
</script>

<style scoped>
.form-box {
  width: 100%;
  height: 100vh;
  max-width: 420px;
  padding:15px;
  margin: 0 auto 0 auto;
}
.form-box .cover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #f8f8f8;  
}
</style>
